$(function(){
    //全选
    $("#all").change(function(){
        if($(this).is(":checked")){
            $('.xz').prop("checked",true)
        }else{
            $('.xz').prop("checked",false)
        }
    });
    //删除
    $("#delete").click(function(){
        $(".xz:checked").parents("tr").remove()
    });
    //封装函数
    function xg(as){
        var btn=$(as).text();
        var td=$(as).parents("tr").children();
        if(btn==="修改"){
            for(var i=1;i<4;i++){
                var v=td.eq(i).text();
                td.eq(i).html('<input type="text" value='+v+'>');
            }
            $(as).text("确认")
        }else{
            for(var j=1;j<4;j++){
                var b=td.eq(j).children().val();
                td.eq(j).html(b);
            }
            $(as).text("修改")
        }
    };
    //修改&确认
    $(".xg").click(function(){
        xg(this);
    });
    //增加
    $("#qdzj").click(function(){
        //第一步读出变量
        var mc=$('.mc').val();
        var sl=$('.sl').val();
        var dw=$('.dw').val();
        if(mc && sl && dw){

        //第二部编写一个tr与内容
            var tr=$("<tr></tr>");
            var zjtr="<td><input type='checkbox' class='xz'/></td>" +
                "<td>"+mc+"</td>" +
                "<td>"+sl+"</td>" +
                "<td>"+dw+"</td>" ;

            var td=$("<td></td>");
            var btn=$('<button type="button" class="xg">修改</button>');
            //第五步挂事件
            btn.click(function(){
                xg(this);
            });
            td.append(btn);
            tr.html(zjtr);
            tr.append(td);
            //第三步插入tr
            $("#tbody").append(tr);
            //第四步清空变量
            var mc=$('.mc').val("");
            var sl=$('.sl').val("");
            var dw=$('.dw').val("");

        }else{
            alert("请填写正确表格形式")
        }




    })










})